<template>
	<view class="bi-percentage-bar">
		<view class="bi-percentage-bar__progress" :style="{'width': progress + '%'}"></view>
	</view>
</template>

<script>
export default {
	name: 'BiPercentageBar',
	props: {
		value: {
			type: Number,
			default: 0
		},
		total: {
			type: Number,
			default: 0
		}
	},
	computed: {
		progress () {
			if (!this.value || !this.total) {
				return 0
			}
			return Math.min((this.value / this.total) * 100, 100)
		}
	}
}
</script>

<style lang="less">
.bi-percentage-bar{
	background-color: #f3f3f3;
	height: 4px;
	border-radius: 2px;
}
.bi-percentage-bar__progress{
	height: 6px;
	background-color: #F47554;
	position: relative;
	top: -1px;
	border-radius: 3px;
}
</style>